<template>
  <div class="collect">
    <van-nav-bar title="收藏" fixed>
      <template #left>
        <div class="checkAll" @click="checkAll" v-if="isdel">{{ischeckAll ? '取消全选' : '全选'}}</div>
      </template>

      <template #right>
        <!-- 编辑按钮 -->
        <div class="edit" @click="edit" v-if="!isdel">编辑</div>
        <div class="isdel" @click="onDel" v-if="isdel">删除</div>
        <div class="cancel" @click="edit" v-if="isdel">取消</div>
      </template>
    </van-nav-bar>
    <div class="login" v-if="uselogining.isLogining==1">
      <van-tabs v-model:active="active" color="#ffa500" @click-tab="onClickTab">
      <van-tab title="菜谱">
        <van-empty description="您还没有收藏菜谱" v-if="isnull" />
        <div class="collect_content">
          <div
            class="collect_content_item"
            v-for="(item, index) in collectData"
          >
            <!-- 删除按钮 -->
            <div class="del" ref="del">
              <div
                class="del_checkbox"
                @click="checkbtn(index)"
                ref="delbtn"
              ></div>
            </div>

            <div
              class="collect_content_item_img"
              :style="`background: url(${item.itemimg}); background-size: cover; background-position: center`"
              @click="toDetails(item.itemid)"
            ></div>
            <div class="collect_content_item_title van-ellipsis" @click="toDetails(item.itemid)">
              {{ item.itemname }}
            </div>
            <div class="collect_content_item_autor" @click="touser(item.authorid)">
              <div
                class="collect_content_item_autor_img"
                :style="`background: url(${item.authorimg}); background-size: cover;`"
              ></div>
              <div class="collect_content_item_autor_name van-ellipsis">
                {{ item.authorname }}
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="笔记">
        <van-empty description="您还没有收藏笔记" v-if="isnull" />
        <div class="collect_content">
          <div class="collect_content_item" v-for="(item, index) in cookBookData">
            <!-- 删除按钮 -->
            <div class="cookdel" ref="cookdel">
              <div
                class="del_checkbox"
                @click="checkbtn(index)"
                ref="cookdelbtn"
              ></div>
            </div>
            <div class="collect_content_item_img" :style="`background: url(${item.itemimg}); background-size: cover; background-position: center`" @click="tocookbook(item.itemid)"></div>
            <div class="collect_content_item_title van-ellipsis" @click="tocookbook(item.itemid)">
              {{ item.itemname }}
            </div>
            <div class="collect_content_item_autor" @click="touser(item.authorid)">
              <div
                class="collect_content_item_autor_img"
                :style="`background: url(${item.authorimg}); background-size: cover;`"
              ></div>
              <div class="collect_content_item_autor_name van-ellipsis">
                {{ item.authorname }}
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    </div>
    <div class="no-login" v-else>
       <span class="login" @click="goLogin">请先登录</span> 
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { getCollectiondata, getCookBookdata } from "../api/api";
import { onMounted, ref } from "vue";
import { useLogin, useLogining } from "../stores/index";
import { useHomeStore } from "../stores/home";

let home = useHomeStore();
let collectData: any = ref<Array<any>>([]);
let active: any = ref<number>(0);
let cookBookData: any = ref<Array<any>>([]);
let isnull = ref<boolean>(true);
let uselogin: any = useLogin();
let uselogining: any = useLogining();
let del: any = ref<Array<any>>([]);
let isdel: any = ref<boolean>(false);
let delbtn: any = ref<Array<any>>([]);
let cookdel: any = ref<Array<any>>([]);
let cookdelbtn: any = ref<Array<any>>([]);
let ischeckAll = ref<boolean>(false);
let route = useRoute();
let router = useRouter();

// 笔记跳转
let tocookbook = (id:any)=>{
  router.push({ name: "Notebook2", params: { id: id,path:route.fullPath } });
}

// 作者跳转
let touser:any = (id:any) => {
  router.push({name: 'userdetails', params: {id: id,path:route.fullPath}})
}

// 菜谱跳转
let toDetails:any = (id:any) => {
  router.push({name:"MenuDetail",params:{menuId:id,path:route.fullPath}})
}



// 删除事件
let checkbtn = (index: number): void => {
  if(active.value == 0){
    if (delbtn.value[index].classList.contains("active")) {
      delbtn.value[index].classList.remove("active");
    } else {
      delbtn.value[index].classList.add("active");
    }
    // 判断是否全部都有选中
    let all:any = [];
    for (let i = 0; i < delbtn.value.length; i++) {
      all.push(delbtn.value[i].classList.contains("active"));
      if(all.every((item:any) => item == true)){
        ischeckAll.value = true;
      }else{
        ischeckAll.value = false;
      }
    }
  }else{
    if (cookdelbtn.value[index].classList.contains("active")) {
      cookdelbtn.value[index].classList.remove("active");
    } else {
      cookdelbtn.value[index].classList.add("active");
    }
    let all:any = [];
    for (let i = 0; i < cookdel.value.length; i++) {
      all.push(cookdelbtn.value[i].classList.contains("active"));
      if(all.every((item:any) => item == true)){
        ischeckAll.value = true;
      }else{
        ischeckAll.value = false;
      }
    }

  }
};

// 全选
let checkAll = (): void => {
  if (active.value == 0) {
    if (ischeckAll.value) {
      for (let i = 0; i < delbtn.value.length; i++) {
        delbtn.value[i].classList.remove("active");
      }
    }else{
      for (let i = 0; i < delbtn.value.length; i++) {
        if (delbtn.value[i].classList.contains("active")) {
          continue;
        }
        delbtn.value[i].classList.add("active");
      }
    }
    ischeckAll.value = !ischeckAll.value;
  } else {
    for (let i = 0; i < cookdelbtn.value.length; i++) {
      if (cookdelbtn.value[i].classList.contains("active")) {
        cookdelbtn.value[i].classList.remove("active");
      } else {
        cookdelbtn.value[i].classList.add("active");
      }
    }
  }
};

//编辑按钮切换
let edit: () => void = (): void => {
  ischeckAll.value = false;
  if (active.value == 0) {
    if(del.value[0]!=undefined){
      isdel.value = !isdel.value;
      if (del.value[0].style.display == "block") {
        for (let i = 0; i < del.value.length; i++) {
          del.value[i].style.display = "none";
          if (delbtn.value[i].classList.contains("active")) {
            delbtn.value[i].classList.remove("active");
          }
        }
      } else {
        for (let i = 0; i < del.value.length; i++) {
          del.value[i].style.display = "block";
        }
      }
    }
  }else{
    //显示删除按钮
    if(cookdel.value[0]!==undefined){
      isdel.value = !isdel.value;
      if (cookdel.value[0].style.display == "block") {
        for (let i = 0; i < cookdel.value.length; i++) {
          cookdel.value[i].style.display = "none";
          if (cookdelbtn.value[i].classList.contains("active")) {
            cookdelbtn.value[i].classList.remove("active");
          }
        }
      } else {
        for (let i = 0; i < cookdel.value.length; i++) {
          cookdel.value[i].style.display = "block";
        }
      }
    }
  }

};

// 确定删除
let onDel: () => void = (): void => {
  if (active.value == 0) {
    for (let i = 0; i < del.value.length; i++) {
      if (delbtn.value[i].classList.contains("active")) {
        home.removeCollectList(Number(collectData.value[i].itemid));
      }
    }
    localStorage.setItem("home", JSON.stringify(home));
    onClickTab();
    for (let i = 0; i < del.value.length; i++) {
      del.value[i].style.display = "none";
    }
  } else {
    for (let i = 0; i < cookdel.value.length; i++) {
      if (cookdelbtn.value[i].classList.contains("active")) {
        
        home.removeLikeList(Number(cookBookData.value[i].itemid));
        home.removeLikeList(cookBookData.value[i].itemid);
      }
    }
    localStorage.setItem("home", JSON.stringify(home));
    onClickTab();
    for (let i = 0; i < cookdel.value.length; i++) {
      cookdel.value[i].style.display = "none";
    }
  }
  ischeckAll.value = false;
  isdel.value = false;
};

let onClickTab: () => void = (): void => {
  ischeckAll.value = false;
  isdel.value = false;
  for (let i = 0; i < del.value.length; i++) {
    del.value[i].style.display = "none";
    if (delbtn.value[i].classList.contains("active")) {
      delbtn.value[i].classList.remove("active");
    }
  }
  for (let i = 0; i < cookdel.value.length; i++) {
    cookdel.value[i].style.display = "none";
    if (cookdelbtn.value[i].classList.contains("active")) {
      cookdelbtn.value[i].classList.remove("active");
    }
  }


  if (active.value == 0) {
    let dataList: any = localStorage.getItem("home");
    dataList = JSON.parse(dataList).collect;
    if (dataList.length == 0) {
      isnull.value = true;
    } else {
      isnull.value = false;
    }
    for (let i = 0; i < dataList.length; i++) {
      dataList[i] = getCollectiondata(dataList[i]);
    }
    let pro = Promise.all(dataList);
    pro.then((res) => {
      let totalArr: Array<any> = [];
      for (let i = 0; i < res.length; i++) {
        let authorname = res[i].data.result.recipe.user.nickname;
        let authorimg = res[i].data.result.recipe.user.user_photo;
        let authorid = res[i].data.result.recipe.user.user_id;
        let itemimg = res[i].data.result.recipe.photo_path;
        let itemname = res[i].data.result.recipe.title;
        let itemid = res[i].data.result.recipe.cook_id;
        let total = {
          authorname,
          authorimg,
          authorid,
          itemimg,
          itemname,
          itemid,
        };
        totalArr.push(total);
      }
      collectData.value = totalArr;
    });
  } else {
    let dataList: any = localStorage.getItem("home");
    dataList = JSON.parse(dataList).like;
    if (dataList.length == 0) {
      isnull.value = true;
    } else {
      isnull.value = false;
    }
    for (let i = 0; i < dataList.length; i++) {
      dataList[i] = getCookBookdata(dataList[i]);
    }
    let pro = Promise.all(dataList);
    pro.then((res) => {
      let totalArr: Array<any> = [];
      for (let i = 0; i < res.length; i++) {
        console.log(res[i].data.result.note);
        let authorname = res[i].data.result.note.author.n;
        let authorimg = res[i].data.result.note.author.p;
        let authorid = res[i].data.result.note.author.id;
        let itemname =
          res[i].data.result.note.title == ""
            ? res[i].data.result.note.entity.title
            : res[i].data.result.note.title;
        let itemimg = res[i].data.result.note.entity.img;
        let itemid = res[i].data.result.note.id;
        let total = {
          authorname,
          authorimg,
          authorid,
          itemname,
          itemimg,
          itemid,
        };
        totalArr.push(total);
      }
      cookBookData.value = totalArr;
    });
  }
};
//进入登录页面
let goLogin:()=>void=():void=>{
    uselogin.updateLogin(true)
}
onMounted(() => {
  let isLogin= localStorage.getItem("isLogin");
  // 跳转到登录界面
  if (isLogin) {
    uselogining.updateLogining(isLogin)
  }
  let dataList: any = localStorage.getItem("home");
  dataList = JSON.parse(dataList).collect;
  if (dataList.length == 0) {
    isnull.value = true;
  } else {
    isnull.value = false;
  }
  // 处理数据
  for (let i = 0; i < dataList.length; i++) {
    dataList[i] = getCollectiondata(dataList[i]);
  }
  let pro = Promise.all(dataList);
  pro.then((res) => {
    let totalArr: Array<any> = [];
    for (let i = 0; i < res.length; i++) {
      let authorname = res[i].data.result.recipe.user.nickname;
      let authorimg = res[i].data.result.recipe.user.user_photo;
      let authorid = res[i].data.result.recipe.user.user_id;
      let itemimg = res[i].data.result.recipe.photo_path;
      let itemname = res[i].data.result.recipe.title;
      let itemid = res[i].data.result.recipe.cook_id;
      let total = {
        authorname,
        authorimg,
        authorid,
        itemimg,
        itemname,
        itemid,
      };
      totalArr.push(total);
    }
    collectData.value = totalArr;
  });
});
</script>

<style scoped lang="scss">

.cancel {
  margin-left: 15px;
}
.del,.cookdel{
  position: absolute;
  right: -47px;
  top: -47px;
  width: 80px;
  height: 80px;
  line-height: 20px;
  text-align: center;
  border-radius: 50% 0 50% 50%;
  background-color: rgba($color: #ffffff, $alpha: 0.5);
  display: none;
}
.del_checkbox {
  width: 15px;
  height: 15px;
  background-color: white;
  position: absolute;
  top: 50px;
  right: 50px;
  border-radius: 50%;
  &.active {
    background-color: rgb(255, 209, 41);
  }
}

.isdel{
  margin-right: 15px;
}
.no-login{
  margin-top: 46px;
  text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   .login{
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    display: inline-block;
    border: 1px solid #f1f1f1;
    padding: 2px 5px;
    border-radius: 4px;
   }
}
// 清除浮动
::v-deep .van-empty {
  margin-top: 100px;
}

::v-deep .van-tabs__wrap {
  position: fixed;
  top: 45px;
  width: 100%;
}
// 清除浮动
.collect_content::after {
  content: "";
  display: block;
  clear: both;
}
.collect_content {
  margin-top: 100px;
}

.collect_content_item {
  float: left;
  margin-left: 12px;
  margin-bottom: 20px;
  box-sizing: border-box;
  width: 170px;
  height: 240px;
  position: relative;
  .collect_content_item_img {
    width: 170px;
    height: 170px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
  .collect_content_item_title {
    width: 170px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 16px;
    box-sizing: border-box;
    color: #fff;
    background-color: rgba(0,0,0,0.8);
  }
  .collect_content_item_autor {
    display: flex;
    border-left: 1px solid #e6e4e4;
    border-right: 1px solid #e6e4e4;
    border-bottom: 1px solid #e6e4e4;
    padding: 10px 10px 10px;
    .collect_content_item_autor_img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .collect_content_item_autor_name {
      display: inline-block;
      width: calc(100% - 40px);
      height: 40px;
      line-height: 40px;
      margin-left: 10px;
      font-size: 14px;
    }
  }
}
.collect {
  position: fixed;
  width: 100%;
  height: 90vh;
  overflow-y: auto;
}
::v-deep .van-nav-bar__title {
  font-size: 18px;
  letter-spacing: 3px;
  font-family: "黑体";
  color: rgb(255, 209, 41);
}
</style>
